<template>
	<div>

		<div style="background-color: #f4f5f6;padding-top: 33px;margin-top:20px;">
			<el-form ref="form" :inline="true" :model="formInline" label-width="80px">
				<el-form-item label="名称" placeholder="搜索名称/编号进行查询">
					<el-input v-model="formInline.noticeTitle"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fetchData(1)">查询</el-button>
					<el-button @click="clean()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-row :span="24" style="margin:26px 0 0;">
			<div style="display: flex;justify-content: flex-start;">
				<p class="tabHeader" style="color: #409eff;border-bottom: 0;">系统公告</p>
				<p @click="navToRuleText()" class="tabHeader">规则文案</p>
				<p @click="navToHelpCenter()" class="tabHeader">帮助中心</p>
				<p @click="navToCityNotice()" class="tabHeader">城主公告</p>
				<p @click="navToNew()" class="tabHeader">新闻发布</p>
			</div>
			<el-row style="margin-top: 20px;">
				<el-button @click="edit('add')"  class="btnPad " type="primary">新增</el-button>
				<!-- <el-button  :class="[isActive==true?'btnChoose':'btnPad'] " plain>banner</el-button>
				<el-button  :class="[isActive2==true?'btnChoose':'btnPad'] " plain>运营位</el-button>
				<el-button  :class="[isActive1==true?'btnChoose':'btnPad'] " plain>主功能区</el-button>

				<el-button  :class="[isActive3==true?'btnChoose':'btnPad'] " plain>商品推荐</el-button> -->
				<!-- <el-button @click="getHotelList()" :class="[isActive4==true?'btnChoose':'btnPad'] " plain>酒店推荐</el-button> -->
			</el-row>
			<div style="margin-top: 20px;">
				<el-table
				        :data="pageInfo.dtos"
				        v-loading="table_loading"
				        element-table_loading-text="加载中"
				        stripe
				        style="width: 100%">
				
				    <el-table-column
				            prop="noticeCode"
				            label="序号">
				    </el-table-column>
				    <el-table-column
				            prop="noticeTitle"
				            label="公告名称">
				    </el-table-column>
				    <el-table-column
				            prop="secTitle"
				            label="副标题">
				    </el-table-column>
				    <el-table-column label="操作" width="250">
				        <template scope="scope">
				            <el-button
				                    size="small"
				                    type="success" @click="handleSend(scope.row)">推送
				            </el-button>
				            <el-button
				                    size="small"
				                    type="primary" @click="edit(scope.row.noticeCode)">编辑
				            </el-button>
				            <el-button
				                    size="small"
				                    type="danger" @click="handleDelete(scope.row.noticeCode)">删除
				            </el-button>
				        </template>
				    </el-table-column>
				</el-table>
				<div class="paginate">
				    <el-pagination
				            @current-change="handleCurrentChange"
				            :current-page="pageInfo.pageNum"
				            :page-size="pageInfo.pageSize"
				            layout="total, prev, pager, next, jumper"
				            :total="pageInfo.count">
				    </el-pagination>
				</div>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				isActive: true,
				isActive1: false,
				isActive2: false,
				isActive3: false,
				isActive4: false,
				table_loading: false,
				formInline: {
				    pageNum:1,
				    pageSize: 10,
				    sort:'CRE_TIME',
				    desc:'DESC',
				    noticeTitle:''
				},
				pageInfo: {
				    pageNum: 1,
				    pageSize: 10,
				    count: 1,
				    dtos: []
				},
				formLabelWidth: '120px'
			}
		},
		created() {

		},
		activated() {
			this.fetchData(this.pageInfo.pageNum);
		},
		mounted() {

		},
		methods: {
			navToRuleText() {
				this.$router.push('/official/rule_text')
			},
			navToHelpCenter() {
				this.$router.push('/official/help_center')
			},
			navToCityNotice() {
				this.$router.push('/official/city_notice')
			},
			navToNew(){
				this.$router.push('/official/newsl_ist')
			},
			edit(id){
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 新增系统公告
				 * @return 
				 * @createTime: 2020-8-8 16:06:59
				 */
			    this.$router.push('/official/annoumcement_detail/' + id)
			},
			clean() {
				this.formInline = {
				    pageNum:1,
				    pageSize: 10,
				    sort:'CRE_TIME',
				    desc:'DESC',
				    noticeTitle:''
				},
				this.fetchData(1)
			},
			fetchData (page = 1) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 获取公告列表
				 * @return 
				 * @createTime: 2020-8-8 16:15:18
				 */
			    this.table_loading = true;
			    this.pageInfo.pageNum = page
			    this.formInline.pageNum = this.pageInfo.pageNum
				console.log(this.formInline)
			    this.dataApi.ajax('selectPageSysNotice', this.formInline, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo = res
			        }
			    });
			
			},
			handleCurrentChange(val) {
			    this.fetchData(val)
			},
			handleDelete(id) {
			    this.confirmDel(() => {
			        this.dataApi.ajax('delSysNotice', {noticeCode: id}, res => {
			            //console.log(res)
			            if (res.responseType === 'S') {
			                this.showMsg('删除成功')
			                this.fetchData(this.pageInfo.pageNum)
			            }
			        });
			    })
			},
			handleSend(item) {
			    this.$confirm('确定推送给所有用户?', '提示', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning'
			    }).then(() => {
			         // content = content.replace(/(\n)/g, "");  
			         // content = content.replace(/(\t)/g, "");  
			         // content = content.replace(/(\r)/g, "");  
			         // content = content.replace(/<\/?[^>]*>/g, "");   
			         // content = content.replace(/\s*/g, "");  
			       this.dataApi.ajax('pushAll', {message:item.secTitle,title:item.noticeTitle}, res => {
			            //console.log(res)
			            if (res.responseType === 'S') {
			                this.showMsg('推送成功')
			                this.fetchData(this.pageInfo.pageNum)
			            }
			        });
			    }).catch(() => {
			               
			    });
			},
		}
	}
</script>

<style>
	.tabHeader {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
		border-right: 0;
		cursor: pointer;
	}

	.tabHeader:last-child {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		border-bottom-color: #FFFFFF;
		background-color: #FFFFFF;
		color: #20a0ff;
	}

	.btnPad {
		width: 120px;
		text-align: center;
	}

	.btnChoose {
		width: 120px;
		text-align: center;
		border: 1px solid #20a0ff;
		color: #20a0ff;
	}
</style>
